<div
  class="bottom-spells ant-card"
  fxLayout="row"
  fxLayoutGap="10px"
  fxLayoutAlign="center stretch"
>
  <!-- ant-card-bordered ant-card -->
  <div
    fxLayout="row"
    fxLayoutAlign="center center"
    class="spell"
    *ngFor="
      let spell of ms.game.computingManager.currentSpells;
      trackBy: getSpellId
    "
  >
    <div class="icons" nz-typography [nzDisabled]="!spell.canAfford">
      <i
        nz-popover
        [nzPopoverTitle]="titleTemplate"
        [nzPopoverContent]="contentTemplate"
        nz-icon
        [nzType]="spell.icon"
        class="first"
        (click)="spell.activate()"
        [style.cursor]="spell.canAfford ? 'pointer' : ''"
      ></i>
      <i
        nz-popover
        [nzPopoverTitle]="titleTemplate"
        [nzPopoverContent]="contentTemplate"
        nz-icon
        [nzType]="spell.icon"
        class="second"
        [ngClass]="spell.colorClass"
        [style.clip-path]="clip(spell)"
      ></i>
    </div>

    <ng-template #titleTemplate>
      <i nz-icon [nzType]="spell.icon" [ngClass]="spell.colorClass"></i>
      <strong> {{ spell.name }} </strong>
    </ng-template>
    <ng-template #contentTemplate>
      <p>{{ spell.description }}</p>
      <div fxLayout="row" fxLayoutAlign="space-between center">
        <div>
          <span class="monospace">{{ spell.price | format: true }}</span>
        </div>
        <div *ngIf="spell.duration > 0">
          <i nz-icon nzType="fa-r:hourglass"></i>
          <span class="monospace">
            {{ spell.getDuration() / 1000 | time: 1 }}
          </span>
        </div>
      </div>
      <div *ngIf="ms.game.computingManager.autoCastResearch1.level > 0">
        Auto
        <nz-radio-group [(ngModel)]="spell.autoCastPriority">
          <label nz-radio-button [nzValue]="valueNo">No</label>
          <label nz-radio-button [nzValue]="value1">1</label>
          <label
            *ngIf="ms.game.computingManager.autoCastResearch2.level > 0"
            nz-radio-button
            [nzValue]="value2"
            >2</label
          >
          <label
            *ngIf="ms.game.computingManager.autoCastResearch3.level > 0"
            nz-radio-button
            [nzValue]="value3"
            >3</label
          >
        </nz-radio-group>
        <div
          class="full-switch"
          *ngIf="
            spell.autoCastPriority === value1 &&
            ms.game.computingManager.autoCastResearchFull.level > 0
          "
        >
          <nz-switch [(ngModel)]="spell.onFull" nzSize="small"></nz-switch>
          <label>On Full Computing</label>
        </div>
      </div>
    </ng-template>
  </div>

  <div class="computing" fxLayoutAlign="center center" fxLayout="column">
    <span class="monospace cur-comp">
      {{ ms.game.computingManager.currentComputing | format: false:2 }}/{{
        ms.game.computingManager.maxComputing | format: false:2
      }}
    </span>
    <span class="monospace">
      {{ ms.game.computingManager.computingPerSec | format: false:2 }}/s
    </span>
  </div>

  <div
    class="percentage progress"
    fxLayout="row"
    fxLayoutAlign="space-around end"
  >
    <div [style.height.%]="ms.game.computingManager.computingPercent"></div>
  </div>
</div>
<!-- [ngClass]="spell.colorClass" -->
